<template>
  <div class="interaction-container">
    <div class="interaction-header">
      <h2>交互系统</h2>
      <div class="sub-menu">
        <router-link to="/interaction/messages" class="menu-item">
          <i class="el-icon-chat-line-round"></i> 消息交互
        </router-link>
        <router-link to="/interaction/notifications" class="menu-item">
          <i class="el-icon-bell"></i> 通知中心
          <el-badge :value="unreadCount" class="badge" v-if="unreadCount > 0"></el-badge>
        </router-link>
      </div>
    </div>
    <div class="interaction-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      unreadCount: 3 // 模拟的未读消息数量
    }
  },
  methods: {
    // 方法预留
  }
}
</script>

<style scoped>
.interaction-container {
  padding: 20px;
  height: 100%;
}

.interaction-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.interaction-header h2 {
  margin: 0 0 15px 0;
  font-size: 20px;
}

.sub-menu {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
}

.menu-item {
  padding: 8px 20px;
  margin-right: 15px;
  color: #606266;
  text-decoration: none;
  position: relative;
  font-size: 14px;
  border-radius: 4px;
}

.menu-item:hover {
  color: #409EFF;
  background-color: #ecf5ff;
}

.menu-item.router-link-active {
  color: #409EFF;
  background-color: #ecf5ff;
  font-weight: bold;
}

.menu-item i {
  margin-right: 5px;
}

.badge {
  margin-top: -8px;
}

.interaction-content {
  min-height: 400px;
}
</style> 